<template>
  <div class="box">
    <!-- 质量控点 -->
    <div class="titleNodeBox">
      <div>
        <div v-for="(itx,idx) in itemList" :key="idx" class="checkDetailsBox">
          <ul>
            <li>
              <van-field :value="itx.itemName" label="检验项目" />
            </li>
            <li>
              <van-field :value="itx.toolName" label="检验工具" />
            </li>
            <li>
              <van-field :value="itx.difference" label="标准值" />
            </li>
            <li>
              <van-field :value="itx.isAuto === 1 ? '人工判定' : '自动判定'" label="检验方式" />
            </li>
            <li>
              <van-col :span="12">
                <van-field :value="itx.upperDifference" label="上差" />
              </van-col>
              <van-col :span="12">
                <van-field :value="itx.lowerDifference" label="下差" />
              </van-col>
            </li>
            <li>
              <van-field v-model="itx.actualValue" :class="itx.isAuto === 0 ? 'mustInput' : ''" :disabled="itx.isAuto === 1" label="实测值" type="number" :placeholder="itx.isAuto === 1 ? '请输入实测值' : ''" />
            </li>
            <li>
                <van-field class="mustInput" name="checkbox" label="检验结果">
                  <template #input>
                    <van-radio-group  v-model="itx.result" direction="horizontal">
                      <van-radio :name="1">合格</van-radio>
                      <van-radio :name="3">不合格</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
            </li>
            <li>
              <van-field name="uploader" label="文件上传">
                <template #input>
                  <van-uploader v-model="itx.itemFileList" multiple :max-count="5" :after-read="afterRead(itx)" :max-size="5242880" accept="image/jpeg ,image/png" @oversize="onOversize" />
                </template>
              </van-field>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QualityControl',
  props: {
    itemList: {
      type: Array,
      default: function () {
      }
    }
  },
  async mounted () {
  },
  methods: {
    onOversize (file) {
      this.$toast.fail('文件大小不能超过 5M')
    },
    // 上传图片
    afterRead (items, type) {
      return file => {
        if (file) {
          if (file.constructor === Object) file = [file]
          const toast = this.$toast.loading({
            duration: 0, // 持续展示 toast
            message: '图片上传中...',
            forbidClick: true,
            loadingType: 'spinner'
          })
          file.filter((item, index) => {
            const form = new FormData()
            form.append('file', item.file)
            this.$axios.post('/dobo-file/files-anon', form).then(res => {
              if (res.data.code === 200) {
                item.fileId = res.data.data.id
                item.fileUrl = res.data.data.url
                item.fileName = res.data.data.name
                if (++index === file.length) {
                  toast.clear()
                }
              } else {
                this.$toast.fail(res.data.msg)
                toast.clear()
              }
            })
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.checkDetailsBox {
  padding-bottom: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  width: 100%;
  ul {
    li {
      overflow: hidden;
      height: auto;
      padding: 0.5px 10px;
      font-size: 22px;
      background: #f3f3f3;
      .van-field {
        width: 100%;
        // border-radius: 5px;
      }
      &:nth-child(1) {
        padding-top: 10px;
      }
      &:last-child {
        padding-bottom: 10px;
      }
    }
  }
}
</style>
<style lang="scss">
</style>
